import React from 'react'
import { Menu,} from 'antd';
import {
  AppstoreOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from '@ant-design/icons';
import {Link,withRouter} from 'react-router-dom'

import menuList from '../../config/menuConfig'
import './leftnav.less'

const { SubMenu } = Menu;
class Leftnav extends React.Component{
    

    getMenusNodes=(menuList)=>{
        const path = this.props.location.pathname
        return menuList.map((item)=>{
            if(!item.children){
            return  (
                <Menu.Item key={item.key} icon={<PieChartOutlined />} >
                    <Link to={item.key}>
                        {item.title}
                    </Link>
                </Menu.Item>
            )     
            }else{
                if(item.children.find(citem => path.indexOf(citem.key)===0)){//判断如果有子菜单的，path路径和子菜单的key相等，
                                                                            //则 指定openkey的值为该子菜单的父菜单的key，因为要默认打开的是父菜单而不是子菜单
                    this.openKey = item.key
                }

          
            
                return  <SubMenu key={item.key} icon={<MailOutlined />} title={item.title} > 
                            {
                                this.getMenusNodes(item.children)
                            }
                        </SubMenu>
            }
            
                
        })
    }

    render(){
        const path = this.props.location.pathname
        const openKey = this.openKey
        return (
            //选中某一项菜单之后出现对应的路径以及页面 但是刷新之后默认选中的菜单有之前选中的项变成了菜单中的首页
            //解决此问题
            <div className="leftnav">
                <Menu
                selectedKeys={[path]}
                
                mode="inline"
                theme="dark"
                defaultOpenKeys={[openKey]}
                >
                {
                   this.getMenusNodes(menuList)
               } 
                {/* <Menu.Item key="/home" icon={<PieChartOutlined to="/home"/>}>
                    首页
                </Menu.Item>
                
                <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                    <Menu.Item key="7">Option 7</Menu.Item>
                    <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu> */}
                
                </Menu>
          
            </div>
        )
    }

}

export default withRouter(Leftnav)